<template>
    <!-- TODO:写购物车页面 -->
    <div class="cart-box">
        <!-- 购物车顶部 -->
        <div class="top">
            <van-nav-bar title="购物车" right-text="清空" @click-right="clearAllCart" />
        </div>
        <!-- 购物车内容区域 -->
        <div class="main">
            <!-- 购物车列表数据 -->
            <div class="cart-item" v-if="cartArr.length > 0" v-for="item in cartArr" :key="item.userid">
                <van-checkbox v-model="item.flag" @change="changeCarSelected(item)"></van-checkbox>
                <van-swipe-cell>

                    <van-card :price="item.originprice" :title="item.proname" class="goods-card" :thumb="item.img1">
                        <template #num>
                            <van-stepper v-model="item.num" theme="round" button-size="22" @change="changeCarNum(item)" />
                        </template>
                    </van-card>

                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="deleteCart(item)" />

                    </template>
                </van-swipe-cell>
            </div>
            <div v-else>
                <van-empty description="啥也没有">
                    <van-button round type="primary" class="bottom-button"
                        color="linear-gradient(to right, #ff6034, #ee0a24)" @click="goBuy">
                        去买东西
                    </van-button>
                </van-empty>
            </div>

        </div>
        <!-- 购物车底部区域 -->
        <div class="foot">
            <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit" />
            <my-footer></my-footer>
        </div>
    </div>
</template>

<script setup lang="ts">
import MyFooter from "@/components/MyFooter.vue"
import { clearAllCartAPI, getCartListAPI, removeCartAPI, changeCartSelectAPI, updateCartNumAPI } from "@/api/cart"
import { showConfirmDialog } from "vant";
import { reactive } from "vue"
import type { ICart } from "../../utils/type"
import { useRouter } from "vue-router";
import { addOrderAPI } from "../../api/order"
import { showNotify } from "vant";
import { computed } from "vue";
let $router = useRouter()
// 需要数组存放购物车的数据
let cartArr: Array<ICart> = reactive<Array<ICart>>([])

// 查询当前用户的购物车数据
const loadCartData = () => {
    getCartListAPI({ userid: localStorage.getItem("app-userid"), }).then((res) => {
        if (res.data.code == 200) {
            console.log(res);

            cartArr.splice(0, cartArr.length, ...res.data.data);
        }

    })
}
loadCartData()
// 清空购物车
const clearAllCart = () => {
    showConfirmDialog({
        title: "清空商品",
        message: "确认删除购物车中的全部商品吗？",
    }).then(() => {
        // 调用清空购物车数据接口
        clearAllCartAPI({ userid: localStorage.getItem("app-userid"), }).then((res) => {
            if (res.data.code == 200) {
                //利用splice方法 
                cartArr.splice(0, cartArr.length);
            }
        })
    })
}
// 删除单个购物车数据
const deleteCart = (item: ICart) => {
    if (item.flag) {
        showNotify({ type: "danger", message: "当前商品已选中，无法删除" });
        return;
    }
    removeCartAPI({ cartid: item.cartid }).then((res: any) => {
        if (res.data.code == 200) {
            showNotify({ type: "success", message: "删除成功" });
            loadCartData();
        }
    });
}
// 更改购物车选中状态
const changeCarSelected = (item: ICart) => {
    changeCartSelectAPI({
        cartid: item.cartid,
        flag: item.flag,
    }).then((res: any) => {
        if (res.data.code == 200) {
            showNotify({ type: "success", message: res.data.message });
        }
    });
}
//  更改购物车数量
const changeCarNum = (item: ICart) => {
    updateCartNumAPI({
        cartid: item.cartid,
        num: item.num,
    }).then((res: any) => {
        if (res.data.code == 200) {
            showNotify({ type: "success", message: res.data.message });
        }
    });
};
// 计算属性
let totalPrice = computed(() => {
    return (
        cartArr.reduce(
            (sum: number, item: any) =>
                (sum += item.flag ? item.originprice * item.num : 0),
            0
        ) * 100
    );
});
// 去购物
const goBuy = () => {
    $router.push("/");
};
const onSubmit = () => {
    // 点击提交订单调接口
    addOrderAPI({ userid: localStorage.getItem("app-userid") }).then((res: any) => {
        if (res.data.code == 200) {
            // 订单提交成功以后需要进入到提交订单页面，进入页面的时候需要获取当前的订单信息
            $router.push({
                path: "/order",
                query: {
                    time: res.data.time
                }

            })
        }

    })
}

</script>

<style scoped lang="less">
.cart-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .top {
        height: 46px;
    }

    .main {
        flex: 1;
        overflow-y: auto;
        background-color: #eee;

        .cart-item {
            display: flex;
            align-items: center;
            margin: 5px 0;
            background-color: #fff;

            .van-swipe-cell {
                width: 100%;
            }

        }

        .goods-card {
            margin: 0;
            background-color: #fff;
        }

        .delete-button {
            height: 100%;
        }
    }

    .bottom-button {
        width: 160px;
        height: 40px;
    }

    .foot {
        height: 100px;

        .van-submit-bar {
            bottom: 50px;
        }
    }
}
</style>